<template>
  <div class="hotellist">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div class="head">
      <span>酒店查询</span>
      <div class="box">
        <div class="box_1">
          <div class="box_t">目的地</div>
          <div class="box_b">
            <!-- <span>{{ arr.provinceName }}</span> -->
            <el-select
              clearable
              size="mini"
              v-model="arr.provinceName"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in restaurants"
                :key="item.locationId"
                :label="
                  item.provinceName +
                  '-' +
                  item.cityName 
                "
                :value="item.cityId"
              >
              </el-option>
            </el-select>
            <!-- <el-popover placement="bottom" width="400" trigger="click">
            <div class="citname" v-if="arr.provinceName==''">
              <div v-for="(item,index) in restaurantsList" :key="index" @click="cityNames(item)">
              <span>{{item.cityName}}</span>
            </div>
            </div>
            <div class="citname" v-if="arr.provinceName!=''">
              <div v-for="(item,index) in ctyNameList" :key="index" @click="cityNamesaa(item)">
              <span>{{item.composedName}}</span>
            </div>
            </div>
            <el-input slot="reference" v-model="arr.provinceName" @input="changeinput" placeholder="目的地"></el-input>
            <el-input slot="reference" v-model="xianji" placeholder="目的地"></el-input>
          </el-popover>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 -->
            <!-- <img class="image" src="../../assets/logo.png" alt="" /> -->
          </div>
        </div>
        <div class="box_2">
          <div class="time_1">
            <span>入住时间</span>
            <el-date-picker
              size="mini"
              style="width: 130px"
              :picker-options="pickerBeginDateBefore"
              v-model="arr.arrivalDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="入住日期"
              ref="provinceName"
            >
            </el-date-picker>
          </div>
          <div class="time_2">
            {{ lateness(arr.arrivalDate, arr.departureDate) }}晚
          </div>
          <div class="time_3">
            <span>退房时间</span>
            <el-date-picker
              size="mini"
              style="width: 130px"
              :picker-options="pickerBeginDateBefore"
              v-model="arr.departureDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="入住日期"
              ref="provinceName"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="box_3">
          <div class="time1">
            <span>房间及住客</span>
            <!-- <span class="time"
              >{{ theroomnumber }}间，{{ thenumberof }}位</span
            > -->
            <div style="display: flex">
              <el-select
                size="mini"
                style="width: 110px"
                v-model="theroomnumber"
                placeholder="一间"
                clearable
              >
                <el-option
                  v-for="item in timeNum"
                  :key="item.id"
                  :label="item.type"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                size="mini"
                style="width: 110px"
                v-model="thenumberof"
                placeholder="1"
                clearable
              >
                <el-option
                  v-for="item in numList"
                  :key="item.num"
                  :label="item.num"
                  :value="item.num"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="box_3">
          <div class="time1">
            <span>关键词</span>
            <!-- <span class="time">{{ keywords ? keywords : "无" }}</span> -->
            <el-input
              size="mini"
              v-model="keywords"
              placeholder="(选填关键词)酒店名/商圈/地标"
            ></el-input>
          </div>
        </div>
        <el-button
          style="height: 40px; margin: 30px 0 0 10px"
          type="primary"
          @click="getselectHotelsListinquire"
          >重新查询
        </el-button>
        <!-- <div class="box_4" keywords>
          <div class="time1">
            <span>关键词 (选填)</span><span class="time_2_2"></span>
            <el-input
              v-model="pinYin"
              @input="bindInput"
              placeholder="机场、火车站、酒店名称或区域"
            ></el-input>
          </div>
          <div>
            <el-row>
              <el-button type="primary">主要按钮</el-button>
            </el-row>
          </div>
        </div> -->
      </div>
    </div>
    <div class="box_c">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :inline="true"
        size="mini"
      >
        <!-- <el-form-item label="房价">
          <el-radio-group v-model="roomHouseprices" @change="hotlepri">
            <el-radio v-for="(item, index) in pricerangeList" :key="index" :label="item.value" :value="item.label">
              {{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="星级：">
          <el-checkbox-group v-model="starcheasList" @change="starChange">
            <el-checkbox
              v-for="(item, index) in starList"
              :label="item.id"
              :value="item.is"
              :key="index"
            >
              {{ item.starsName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <!-- <el-button @click="getfilterCondition">1111111111111</el-button> -->
        <!-- <div>
          <el-form-item label="行政区">
            <el-select v-model="purview.district" placeholder="行政区" @change="changeList" clearable>
              <el-option v-for="item in administrativeDistrict" :key="item.filterConditionId"
                :label="item.filterConditionName" :value="item.filterConditionName" :show-all-levels="false">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商圈">
            <el-select v-model="purview.business" placeholder="商圈" @change="changeList" clearable>
              <el-option v-for="item in businessDistrict" :key="item.filterConditionId"
                :label="item.filterConditionName" :value="item.filterConditionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机场/车站">
            <el-select v-model="purview.airport" placeholder="机场/车站" @change="changeList" clearable>
              <el-option v-for="item in airportStation" :key="item.subwayId" :label="item.subwayName"
                :value="item.subwayName">
              </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="景点">
            <el-select v-model="purview.jingdian" placeholder="机场/车站" @change="changeList" clearable>
              <el-option v-for="item in AttractionsList" :key="item.filterConditionId" :label="item.filterConditionName"
                :value="item.filterConditionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地铁站">
             <el-select v-model="star" placeholder="地铁站">
            <el-option
              v-for="item in subwayStation"
              :key="item.filterConditionId"
              :label="item.filterConditionName"
              :value="item.filterConditionId"
            >
            </el-option>
          </el-select>
          <el-cascader placeholder="地铁站" clearable v-model="filterConditionName" :value="subwayId"
              :label="label" :options="subwayStation" @change="handleChange">
            </el-cascader>
            <el-cascader placeholder="地铁站" clearable v-model="filterConditionName"  @change="handleChange" :options="subwayStation" :props="optionProps">
            </el-cascader>
          </el-form-item>
          <el-form-item label="医院">
            <el-select v-model="star" placeholder="医院">
              <el-option
                v-for="item in hospital"
                :key="item.filterConditionId"
                :label="item.filterConditionName"
                :value="item.filterConditionId"
              >
              </el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="距离">
            <el-select v-model="purview.hospital" placeholder="距离" @change="changeList" clearable>
              <el-option v-for="item in distance" :key="item.filterConditionId" :label="item.filterConditionName"
                :value="item.filterConditionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="热门区域">
            <el-select v-model="purview.hot" placeholder="热门区域" @change="changeList" clearable>
              <el-option v-for="item in popularArea" :key="item.filterConditionId" :label="item.filterConditionName"
                :value="item.filterConditionName">
              </el-option>
            </el-select>
          </el-form-item>
        </div> 
       <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="details">
      <div class="details_l" id="table">
        <!-- <div class="l_top">
          <div class="yiqing">
            <span>[北京最新疫情管控措施]11月17日凌晨起</span>，进返京须持48小时内核酸检测阴性证明和'北京健康宝'绿码
          </div>
          <img class="image" src="../../assets/logo.png" alt="" />
        </div> -->
        <!-- <div class="l_cen">
          <span :class="item.is ? 'radio' : ''" v-for="(item, index) in sortList" :key="index"
            @click="bindNav(item, index)">{{ item.names }}</span>
        </div> -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @cell-mouse-enter="cellMouseEnter"
          :row-class-name="tableRowClassName"
          :row-style="selectedStyle"
        >
          <el-table-column prop="name" label="酒店名称" width="230">
          </el-table-column>
          <el-table-column prop="star" label="星级" width="80">
            <template slot-scope="scope">
              <template v-if="scope.row.star == 0">五星级</template>
              <template v-if="scope.row.star == 1">豪华</template>
              <template v-if="scope.row.star == 2">四星级</template>
              <template v-if="scope.row.star == 3">高档</template>
              <template v-if="scope.row.star == 4">三星级</template>
              <template v-if="scope.row.star == 5">舒适</template>
              <template v-if="scope.row.star == 6">经济型</template>
              <template v-if="scope.row.star == 7">低档</template>
            </template>
          </el-table-column>
          <el-table-column prop="frontImg" label="酒店图片" width="120">
            <template slot-scope="scope">
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  slot="reference"
                  :src="scope.row.frontImg"
                  style="width: 55px; height: 55px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="酒店地址" width="230">
          </el-table-column>
          <!-- <el-table-column prop="distance" label="距市中心" width="100">
            <template slot-scope="scope">
              {{ scope.row.distance }}公里
            </template>
          </el-table-column> -->
          <el-table-column prop="lowestPrice" label="最低房价" width="90">
            <template slot-scope="scope">{{
              scope.row.lowestPrice / 100/lateness(arr.arrivalDate, arr.departureDate) 
            }}</template>
          </el-table-column>
          <!-- <el-table-column
            prop="activelabelName?activelabelName:'暂无'"
            label="房态"
          >
            <img src="" alt="" />
          </el-table-column> -->
          <el-table-column label="好评率">
            <template slot-scope="scope">
              {{
                scope.row.hotelContents.detailInfo.ratings[0].value == "null" || scope.row.hotelContents.detailInfo.ratings[0].value == ""
                  ? "暂无评分"
                  : scope.row.hotelContents.detailInfo.ratings[0].value/10
              }}
              <!-- <template v-if="scope.row.commentScore==''||scope.row.commentScore=='null'">暂无好评</template> -->
              <!-- <template v-if="scope.row.commentScore==''">暂无评分</template> -->
            </template>
            <template></template>
          </el-table-column>
          <el-table-column prop="address" label="更多房型">
            <template slot-scope="scope">
              <el-button @click="seehotel(scope.row)" type="text" size="small"
                >立即查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
        <!-- <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div> -->
      </div>
      <!-- <div class="details_r"><Map class="map" ref="mapObject"></Map></div> -->
    </div>
  </div>
</template>
<script>
import crumbs from "../../components/Crumbs.vue";
import formatTime from "../../common/formatTime.js";
import Map from "../../components/map.vue";
export default {
  name: "hotellist",
  components: {
    crumbs,
    formatTime,
    Map,
  },
  data() {
    return {
      // optionProps: {
      //   value: "subwayName",
      //   label: "subwayName",
      //   children: "children",
      // },
      ctyNameList: [],
      restaurantsList: [],
      numList: [
        {
          num: "1",
          is: false,
        },
        {
          num: "2",
          is: false,
        },
        {
          num: "3",
          is: false,
        },
        {
          num: "4",
          is: false,
        },
        {
          num: "5",
          is: false,
        },
      ],
      xianji: "",
      pickerBeginDateBefore: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果当天可选，就不用减8.64e7
        },
      },
      roomHouseprices: "",
      pricerangeList: [
        {
          label: "不限",
          value: "0-0",
        },
        {
          label: "1-300",
          value: "1-300",
        },
        {
          label: "300-500",
          value: "300-500",
        },
        {
          label: "500-700",
          value: "500-700",
        },
        {
          label: "700-900",
          value: "700-900",
        },
        {
          label: "900以上",
          value: "900-99999999",
        },
      ],
      // 价格
      pricerange: "",
      theroomnumber: "",
      thenumberof: "",
      // 关键字
      keywords: "",
      starcheasList: [],
      //范围数据
      purview: {
        district: "",
        business: "",
        hospital: "",
        hot: "",
        airport: "",
        jingdian: "",
      },
      hotelEnum: "",
      arrivalDate: "",
      provinceName: "",
      userLocation: ["39.726987", "116.34156"],
      pageSize: 10,
      total: 0,
      currentPage: 1,
      BreadCrumb: [
        {
          path: "/reservation/thequery",
          name: "酒店查询",
        },
        {
          path: "/hotel/hotellist",
          name: "酒店列表",
        },
      ],
      tableData: [],
      rowIndex: 0,
      selectRow: {},
      arr: {},
      star: "",
      pinYin: "",
      form: {
        star: null,
        roomNum: 1,
        Num: 1,
      },

      sortindex: 0,
      starList: [
        {
          starsName: "五星级",
          id: 0,
        },
        {
          starsName: "豪华",
          id: 1,
        },
        {
          starsName: "四星级",
          id: 2,
        },
        {
          starsName: "高档",
          id: 3,
        },
        {
          starsName: "三星级",
          id: 4,
        },
        {
          starsName: "舒适型",
          id: 5,
        },
        {
          starsName: "经济型",
          id: 6,
        },
        {
          starsName: "低档",
          id: 7,
        },
      ],
      sortList: [
        {
          id: "0",
          names: "智能排序",
          sorting: "intelligent",
          is: true,
        },
        {
          id: "1",
          names: "低价优先",
          sorting: "priceMin",
          is: false,
        },
        {
          id: "2",
          names: "高价优先",
          sorting: "priceMax",
          is: false,
        },
        {
          id: "3",
          names: "好评优先",
          sorting: "praiseMax",
          is: false,
        },
        {
          id: "4",
          names: "直线距离近到远",
          sorting: "distance",
          is: false,
        },
        {
          id: "5",
          names: "星级高到低",
          sorting: "wordOfMouth",
          is: false,
        },
      ],
      sorting: "intelligent",
      restaurants: [],
      timeNum: [
        {
          id: "1",
          type: "一间",
          is: false,
        },
        {
          id: "2",
          type: "二间",
          is: false,
        },
        {
          id: "3",
          type: "三间",
          is: false,
        },
        {
          id: "4",
          type: "四间",
          is: false,
        },
        {
          id: "5",
          type: "五间",
          is: false,
        },
        {
          id: "6",
          type: "六间",
          is: false,
        },
        {
          id: "7",
          type: "七间",
          is: false,
        },
        {
          id: "8",
          type: "八间",
          is: false,
        },
        {
          id: "9",
          type: "九间",
          is: false,
        },
      ],
      lng: "",
      lat: "",
      // 行政区
      administrativeDistrict: [],
      // 商圈
      businessDistrict: [],
      // 机场车站
      airportStation: [],
      airportStationList: [],
      airportStationList1: [],
      airportStationList2: [],
      airportStationList3: [],
      // 地铁站
      subwayStation: [],

      // 医院
      hospital: [],
      // 距离
      distance: [],
      // 热门区域
      popularArea: [],
      // 景点
      AttractionsList: [],
      pageNum: 1,
      tableLoading: null,
      address: "", //地区
      Infrontofthe: "",
      behind: "",
      starChangebiaoshi: 0,
      nextId: null,
    };
  },
  methods: {
    // 重新查询按钮
    getselectHotelsListinquire() {
      this.getselectHotelsList();
    },

    // cityNames(row){
    //   console.log(row)
    //   this.arr.provinceName=row.cityName
    //   // console.log(this.formInline.provinceName)
    //   this.changeinput()
    // },
    //      cityNamesaa(row){
    //   console.log(row)
    //   if(row.parentNameCn==""){
    //     row.parentNameCn=row.regionNameCn
    //   }
    //   let a= row.parentNameCn.replace(row.parentNameCn.substring(row.parentNameCn.length-1,row.parentNameCn.length),'')
    //   let b= row.parentNameCn.replace(row.parentNameCn.substring(0,row.parentNameCn.length-1,),'')
    //   console.log(row.parentNameCn,a)
    //   // let b=
    //   // 目的地
    //   if(b=='省'){
    //     let c=row.regionNameCn.replace(row.regionNameCn.substring(row.regionNameCn.length-1,row.regionNameCn.length),'')
    //     console.log(c)
    //     this.formInline.provinceName=c
    //     this.formInline.name=''
    //   }else{
    //   this.formInline.provinceName=a
    //   }
    //   if(row.parentId!="99999999" && b!='省'){
    //   this.formInline.name=row.regionNameCn
    //   }
    // },
    // // 搜索目的地事件
    // changeinput(e) {
    //   console.log(e)
    //   // console.log(this.formInline.provinceName)
    //   // this.showLoading()
    //   // 关键字 formInline.name
    //   // 目的地 formInline.provinceName
    //   this.$axios.getdestination({
    //     name:this.arr.provinceName
    //   }).then((res) => {
    //     // this.closeLoading()
    //     console.log(res)
    //     if (res.code == 200) {
    //       this.ctyNameList=res.data
    //     } else {

    //     }
    //   })
    // },

    // loadAll() {
    //   this.$axios.getselectCityList().then((res) => {
    //     if (res.code == "200") {
    //       this.restaurants = res.data;
    //       // return this.restaurants
    //     }
    //   });
    // },
    // 房价点击事件
    // hotlepri(row) {
    //   // debugger
    //   console.log(row);
    //   this.pricerange = row;
    //   if (this.pricerange == '不限') {
    //     this.pricerange = '0-0'
    //   }
    //   let str = this.pricerange
    //   let index1 = str.lastIndexOf('-')
    //   let qian = str.substring(0, index1)
    //   let index2 = str.lastIndexOf('-')
    //   str = str.substring(index2 + 1, str.length)
    //   console.log(qian, str, )
    //   this.Infrontofthe = qian,
    //     this.behind = str
    //   this.getselectHotelsList();
    // },
    // changeList(index) {
    //   console.log(index);
    //   this.keywords =index
    //   console.log(this.address);
    //   this.getselectHotelsList();
    // },
    //目的地列表
    loadAllNum() {
      this.$axios
        .getHotelCity({
          cityName: "",
        })
        .then((res) => {
          if (res.code == "00000") {
            this.restaurants = res.data;
          }
        });
    },
    lateness(sDate1, sDate2) {
      var dateSpan, tempDate, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },

    handleSizeChange(value) {
      console.log(value);
      this.getselectHotelsList();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
  
      this.getselectHotelsList();
      this.pageNum = value;
    },
    // 智能排序
    // bindNav(item, index) {
    //   this.sorting = this.sortList[index].sorting;
    //   this.sortList[index].is = !this.sortList[index].is;
    //   console.log(this.sortList, this.sorting);
    //   this.sortindex = index;
    //   this.getselectHotelsList();
    // },
    // 星级
    starChange(val) {
      console.log(val);
      this.getselectHotelsListinquire()
    },
    // 区域位置列表查询
    // getfilterCondition() {
    //   console.log(this.presentcity);
    //   this.$axios
    //     .getfilterCondition({
    //       lng: this.userLocation[0],
    //       lat: this.userLocation[1],
    //       cityCountyName: this.arr.provinceName,
    //       // lat: "116.34156",
    //       // lng: "39.726987",
    //       // cityCountyName:"北京"
    //     })
    //     .then((res) => {
    //       // 行政区
    //       this.administrativeDistrict = res.data[0].regionalLocationVoList;
    //       // 商圈
    //       this.businessDistrict = res.data[1].regionalLocationVoList;
    //       // 机场车站
    //       this.airportStation = res.data[2].regionalLocationVoList;
    //       // 地铁站
    //       let list = JSON.parse(
    //         JSON.stringify(res.data[3].regionalLocationVoList)
    //       );
    //       for (let i = 0; i < list.length; i++) {
    //         let obj = {};
    //         obj.subwayName = list[i].filterConditionName;
    //         obj.subwayId = list[i].filterConditionId;
    //         obj.children = list[i].filterCondition;
    //         this.subwayStation.push(obj);
    //       }
    //       console.log(this.subwayStation);
    //       this.AttractionsList = res.data[5].regionalLocationVoList.concat(
    //         res.data[6].regionalLocationVoList
    //       );
    //       console.log(this.AttractionsList, 11);
    //       // 医院
    //       this.hospital = res.data[4].regionalLocationVoList;
    //       // 距离
    //       this.distance = res.data[5].regionalLocationVoList;
    //       // 热门区域
    //       this.popularArea = res.data[6].regionalLocationVoList;
    //     });
    // },
    // handleChange(value) {
    //    console.log(value[1]);
    //   this.keywords =value[1]
    //   // this.address = value[1];
    //   console.log(this.address);
    //   this.getselectHotelsList();
    // },
    // 查看酒店详情
    seehotel(row) {
      console.log(row);
      let obj = {
        arrivalDate: this.arr.arrivalDate,
        departureDate: this.arr.departureDate,
        hotelId: row.hotelId,
      };
      console.log(obj);
      this.$router.push({
        name: "details",
        params: {
          obj: obj,
          arr: this.arr,
          hotelEnum: this.hotelEnum,
          theroomnumber: this.theroomnumber,
        },
      });
    },
    // 酒店列表条件查询接口
    getselectHotelsList() {
      this.showLoading();
      this.$axios
        .getHotelList({
          // departureDate: this.arr.departureDate,
          // // 星级
          // starRatingList: arr1,
          // minPrice: this.Infrontofthe,
          // maxPrice: this.behind,
          // provinceName: this.arr.provinceName,
          // // provinceName:"保定",
          // arrivalDate: this.arr.arrivalDate,
          // lat: this.lat,
          // lng: this.lng,
          // sorting: this.sorting,
          // pageNum: this.pageNum,
          // pageSize: this.pageSize,
          // address: this.xianji,
          // // addressType:this.data.addressType,
          // // addressId:this.data.locatidis,
          // keywords: this.keywords,
          // // 酒店供应商  艺龙和自营  默认艺龙
          // hotelEnum: "Elong",

          // 正式环境
          // cityCode:this.arr.provinceName,
          // 测试环境
          cityCode: 10000004,
          checkin: this.arr.arrivalDate,
          checkout: this.arr.departureDate,
          queryText: this.keywords,
          bizType: 1,
          pageSize:this.pageSize,
          sortType: 1,
          star: this.starcheasList,
          nextId: this.nextId,
        })
        .then((res) => {
          this.closeLoading();
          console.log(res);
          // this.closeLoading();
          if (res.code == "00000") {
            console.log(res.data);
            // this.hotelEnum = res.data.result.hotelListSearch.totalCount;
            this.total = res.data.result.hotelListSearch.totalCount;
            this.tableData =
              res.data.result.hotelListSearch.hotelListSearchInfo;
          }
          this.nextId = res.data.result.hotelListSearch.nextId;
          // if (res.msg == "未查询到酒店信息") {
          //   this.closeLoading();
          //   this.$confirm("未查询到酒店请重新筛选", "提示", {
          //     confirmButtonText: "确定",
          //     type: "warning",
          //   });
          // }
        })
        .catch((err) => {
          this.closeLoading();
        });
    },
    getLatAndLngByAddress() {
      this.$axios
        .getLatAndLngByAddress({
          address: this.arr.provinceName,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.lng = res.data.lng;
            this.lat = res.data.lat;
            // this.getselectHotelsList();
            // this.getsfilterCondition(res.data.lng,res.data.lat)
            // this.getselectHotelsListinquire();
          }
        });
    },
    // getsfilterCondition(lng,lat){
    //     this.$axios
    //     .getfilterCondition({
    //       lng:lng ,
    //       lat: lat,
    //       cityCountyName: this.arr.provinceName,
    //       // lat: "116.34156",
    //       // lng: "39.726987",
    //       // cityCountyName:"北京"
    //     })
    //     .then((res) => {
    //       // 行政区
    //       this.administrativeDistrict = res.data[0].regionalLocationVoList;
    //       // 商圈
    //       this.businessDistrict = res.data[1].regionalLocationVoList;
    //       // 机场车站
    //       this.airportStation = res.data[2].regionalLocationVoList[0].filterCondition.concat( res.data[2].regionalLocationVoList[1].filterCondition, res.data[2].regionalLocationVoList[2].filterCondition);
    //       // 地铁站
    //       let list = JSON.parse(
    //         JSON.stringify(res.data[3].regionalLocationVoList)
    //       );
    //       for (let i = 0; i < list.length; i++) {
    //         let obj = {}
    //         obj.subwayName = list[i].filterConditionName
    //         obj.subwayId = list[i].filterConditionId
    //         obj.children = list[i].filterCondition
    //         this.subwayStation.push(obj)
    //       }
    //         this.AttractionsList =res.data[5].regionalLocationVoList.concat(res.data[6].regionalLocationVoList)
    //       console.log(this.AttractionsList,11)
    //       // 医院
    //       this.hospital = res.data[4].regionalLocationVoList;
    //       // 距离
    //       this.distance = res.data[5].regionalLocationVoList;
    //       // 热门区域
    //       this.popularArea = res.data[9].regionalLocationVoList;
    //     });
    // },
    cellMouseEnter(row, column, cell, event) {
      var position = 0;
      this.tableData.forEach((element) => {
        if (element.id == row.id) {
          this.selectRow = row;
          this.rowIndex = position;
        }
        position++;
      });
      // 传递酒店地图信息
      // this.$refs.mapObject.mapPosition(row);
    },
    //table样式
    selectedStyle({ row, rowIndex }) {
      if (this.rowIndex === rowIndex) {
        return {
          "background-color": "",
        };
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
      return "";
    },
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        // target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
    closeLoading() {
      this.tableLoading.close();
    },
  },
  mounted() {
    this.loadAllNum();
    this.arr = this.$route.params.arr;
    console.log(this.arr);
    this.getLatAndLngByAddress();
    this.form.star = this.$route.params.arr.star;
    this.starcheasList = this.$route.params.arr.star;
    console.log(this.form.star);
    //  关键字
    this.keywords = this.$route.params.keywords;
    this.xianji = this.$route.params.keywords;
    //  房间数量
    (this.theroomnumber = this.$route.params.theroomnumber),
      // 几人
      (this.thenumberof = this.$route.params.thenumberof),
      // this.loadAll()
      this.getselectHotelsList();
  },
};
</script>

<style scoped>
.citname {
  height: 200px;
  overflow-y: scroll;
}
.head {
  background: #ffffff;
  margin: 0px 0 0 90px;
  padding: 25px 0 0 25px;
}

.head > span {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 28px;
  color: #000000;
}

.box {
  display: flex;
  margin-top: 20px;
}

.box_t {
  color: #9fa7b6;
  font-size: 18px;
  /* padding: ; */
}

.box_b {
  color: #142a4a;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  width: 200px;
}

.image {
  width: 20px;
  height: 20px;
}

.box_1 {
  height: 109px;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 30px;
}

.box_2 {
  height: 109px;
  border: 1px solid #cccccc;
  border-left: 0px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 334px;
  padding: 0 17px;
}

.time_1 {
  display: flex;
  flex-direction: column;
}

.time {
  color: #142a4a;
  font-size: 22px;
  font-weight: 800;
}

.time2 {
  font-size: 22px;
  font-weight: 800;
}

.time_2_2 {
  color: #9fa7b6;
  font-size: 18px;
}

.time_3 {
  display: flex;
  flex-direction: column;
}

.time_3 > span:nth-child(1) {
  text-align: right;
}

.box_3 {
  height: 109px;
  border: 1px solid #cccccc;
  border-left: 0px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 280px;
  justify-content: space-around;
}

.time1 {
  display: flex;
  flex-direction: column;
}

.box_4 {
  height: 109px;
  border: 1px solid #cccccc;
  border-left: 0px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 322px;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 0 20px;
}

.box_c {
  margin-top: 20px;
  margin-left: 80px;
}

.details {
  /* display: flex; */
  justify-content: space-between;
  /* width: 1181px; */
  margin-left: 120px;
  margin-right: 120px;
}

.l_top {
  justify-content: space-between;
  line-height: 70px;
  align-items: center;
  display: flex;
  background: #fef7ed;
  font-size: 14px;
  padding: 0 32px;
}

.el_table {
  width: 742px;
  font-size: 13px;
}

.l_top > .yiqing {
  width: 465px;
}

.l_top > .yiqing span {
  color: #f0772f;
}

.l_cen {
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.demonstration {
  font-size: 13px;
}
.details_r {
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
  width: 60%;
  /* line-height: 60px; */
}

.select {
  font-weight: bold;
}

.radio {
  color: #2f80ed;
}

.hotelNme {
  margin-left: 10px;
  width: 186px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* /deep/.el-table--scrollable-x .el-table__body-wrapper {
   font-size: 13px;
 } */
.addressMap {
  display: flex;
  flex-direction: column;
}

.addressMap > span:nth-child(1) {
  width: 191px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maps {
  color: #3c88ee;
}

.posi_ab {
  position: fixed;
}

.seeMap {
  display: flex;
}

.mapAddress {
  height: 80vh;
  /* width: 80%; */
  display: flex;
  justify-content: space-between;
}

/* /deep/.el-dialog__header {
  padding: 0px !important;
}
/deep/.el-dialog {
  width: 100%;
  margin-top: 0px !important;
} */
.l_center {
  width: 50%;
}

.l_center > span {
  width: 100px;
  display: inline-block;
  line-height: 67px;
}

/* /deep/ .el-vue-amap-container, .el-vue-amap-container .el-vue-amap {
  width: 1281px;
} */

.tui_sort {
  display: flex;
  justify-content: space-between;
}

.map {
  width: 100px;
}
</style>